import React, { useEffect, useState } from 'react'
import { TabBar } from 'antd-mobile'
import { useNavigate , useLocation} from "react-router-dom"

import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
    const navigate = useNavigate()
    const location = useLocation()
    const tabs = [
        {
            key: '/',
            title: '月账单',
            icon: <AppOutline />,
        },
        {
            key: '/year',
            title: '统计',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/myinformation',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    let [activeKey, setActiveKey] = useState(location.pathname)

    const changeTab = (key) => {
        setActiveKey(key)
        navigate(key)
    }
    return (
        <>
            <div>
                <TabBar onChange={changeTab} activeKey={activeKey}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </>
    )
}